<template>
  <div style="height: 100%; min-height: 550px; min-width: 1200px">
    <div class="login-header">
      <h2><img src="../../assets/img/login_logo.png" /></h2>
      <div v-if="infoFlag" class="privary-info">本平台为互联网非涉密平台，严禁处理、传输国家秘密。</div>
    </div>
    <div class="login-banner">
      <el-carousel>
        <el-carousel-item>
          <div class="banner-bg"><img src="../../assets/img/login_bg_01.jpg"></div>
          <div class="banner-pic"><img src="../../assets/img/login_bg_04.jpg" /></div>
        </el-carousel-item>
        <el-carousel-item>
          <div class="banner-bg"><img src="../../assets/img/login_bg_02.jpg"></div>
          <div class="banner-pic"><img src="../../assets/img/login_bg_03.jpg" /></div>
        </el-carousel-item>
      </el-carousel>

      <div class="login-content" v-if="!loginFlag">
        <div style="position: relative; width: 100%; height: 100%">
          <div class="login-main">
            <el-form :model="dataForm" :rules="dataRule" ref="dataFormRef" @keyup.enter.native="dataFormSubmit()"
              status-icon  autocomplete="off">
              <el-form-item prop="userName">
                <el-input  autocomplete="off" v-model="dataForm.userName" clearable placeholder="帐号"></el-input>
              </el-form-item>
              <el-form-item prop="password">
                <el-input  autocomplete="off" v-model="dataForm.password" clearable type="password" placeholder="密码"></el-input>
              </el-form-item>
              <el-form-item prop="captcha">
                <el-row :gutter="20">
                  <el-col :span="14">
                    <el-input v-model="dataForm.captcha" clearable placeholder="验证码">
                    </el-input>
                  </el-col>
                  <el-col :span="10" class="login-captcha">
                    <img :src="captchaPath" @click="getCaptcha()" alt="">
                  </el-col>
                </el-row>
              </el-form-item>
              <el-button class="login-btn-submit" type="primary" v-if="isShow" disabled><i class="el-icon-loading"></i>
                登 录</el-button>
              <el-button class="login-btn-submit e" type="primary" v-else @click="dataFormSubmit()">登 录</el-button>
            </el-form>
            <span @click="handleGetPwd()" style="padding: 5px;float: right;color: #EBEEF5; cursor: pointer;">找回密码</span>
          </div>
        </div>
      </div>

    </div>
    <div class="login-footer">
      <span @click="handle" :style="{ 'cursor': infoFlag && 'pointer' }">{{ infoText }}
      </span>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, watch, onMounted, getCurrentInstance } from 'vue' // 导入 Vue 3 的组合式 API
import { useRouter } from 'vue-router' // 导入 useRouter 用于获取路由实例
import { getUUID } from '@/utils' // 导入 getUUID 工具函数

const router = useRouter() // 获取路由实例
const { proxy } = getCurrentInstance() // 获取全局属性代理

const infoText = ref('中金易云 ·智慧出版系统') // 定义响应式变量 infoText
const loginFlag = ref(false) // 定义响应式变量 loginFlag
const infoFlag = ref(false) // 定义响应式变量 infoFlag
const isShow = ref(false) // 定义响应式变量 isShow
const dataForm = reactive({ // 定义响应式对象 dataForm
  userName: '',
  password: '',
  uuid: '',
  captcha: '',
  phone: '',
  verificationCode: '',
  newPassword: '',
  confirmPassword: ''
})
const dataFormRef = ref(null) // 定义响应式变量 dataFormRef
const dataRule = reactive({ // 定义响应式对象 dataRule
  userName: [
    { required: true, message: '帐号不能为空', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '密码不能为空', trigger: 'blur' }
  ],
  captcha: [
    { required: true, message: '验证码不能为空', trigger: 'blur' }
  ]
})
const captchaPath = ref('') // 定义响应式变量 captchaPath

watch(infoFlag, (value) => { // 监听 infoFlag 的变化
  if (value) {
    infoText.value = '津ICP备18009576号-2'
  }
})

onMounted(() => { // 使用 onMounted 替代 onCreated
  getPublisherid() // 获取发布者 ID
  getCaptcha() // 获取验证码
  setInterval(() => { // 设置定时器，每 400 秒刷新一次验证码
    setTimeout(() => {
      getCaptcha()
    }, 600)
  }, 400000)
})

const handleGetPwd = () => { // 切换登录和找回密码视图
  loginFlag.value = !loginFlag.value
  getCaptcha()
}

const handle = () => { // 处理点击事件
  if (!infoFlag.value) {
    return
  }
  window.open('https://beian.miit.gov.cn', '_blank')
}

const getPublisherid = () => { // 获取发布者 ID
  proxy.$http({
    url: proxy.$http.adornUrl('/sys/getPublisherid'),
    method: 'get',
    params: proxy.$http.adornParams()
  }).then(({ data }) => {
    if (data.code === 0 && data.userPublisherid === 'tjjt') {
      infoFlag.value = true
    }
  })
}

// 提交表单
const dataFormSubmit = () => {
  if (dataForm.userName && dataForm.password && dataForm.captcha) {
    isShow.value = true
    proxy.$http({
      url: proxy.$http.adornUrl('/sys/login'),
      method: 'post',
      data: proxy.$http.adornData({
        'username': dataForm.userName,
        'password': dataForm.password,
        'uuid': dataForm.uuid,
        'captcha': dataForm.captcha
      })
    }).then(({ data }) => {
      if (data && data.code === 0) {
        console.log('Login successful', data.token)
        localStorage.setItem("token",data.token)
        router.replace({ name: 'home' })
      } else {
        getCaptcha()
        dataForm.captcha = '';
        isShow.value = false
      }
    })
  }
}

// 获取验证码
const getCaptcha = () => {
  dataForm.uuid = getUUID()
  captchaPath.value = proxy.$http.adornUrl(
    `/erp-system/captcha.jpg?uuid=${dataForm.uuid}`
  )
}
</script>

<style lang="scss">
body,
html {
  height: 100%
}

.login-header {
  height: 15%;
  background: #fff;
  position: relative;

  .privary-info {
    position: absolute;
    left: 63%;
    top: 50%;
    transform: translateY(-50%);
    color: red;
    font-size: 14px;
  }
}

.login-header h2 {
  position: absolute;
  left: 57px;
  top: 50%;
  transform: translate(0, -50%);
}

.login-banner {
  height: calc(100% - 80px - 15%);
  position: relative;
}

.banner-bg img,
.banner-pic img {
  width: 100%;
  height: 100%;
}

.banner-bg {
  height: 100%;
}

.banner-pic {
  width: 47%;
  height: 70%;
  position: absolute;
  left: 15%;
  top: 50%;
  transform: translate(0, -50%);
  box-shadow: 0 0 20px 1px rgba(0, 0, 0, .5);
}

.login-content {
  background: rgba(255, 255, 255, 0.1);
  width: 22%;
  height: 70%;
  position: absolute;
  right: 15%;
  top: 50%;
  transform: translate(0, -50%);
  z-index: 100;
  border-radius: 8px;
}

.login-main {
  position: absolute;
  width: 80%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  // :deep(.is-success){
  //   .el-input .el-input__suffix .el-input__icon {
  //     color: #3ab1ac;
  //   } 
  // }
  .el-form-item.is-success .el-input__validateIcon{
    color: #3ab1ac;
  }
}

.login-main .el-form-item {
  margin-bottom: 22px; 
  .el-input { 
    input:-webkit-autofill,
    input:-webkit-autofill:hover, 
    input:-webkit-autofill:focus,
    input:-internal-autofill-selected {
      -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
      background-color: transparent !important;
      transition: background-color 9999s ease-in-out 0s; // 兼容性处理
      color: #fff!important;
    } 
}
}

.login-main .el-input__wrapper {
  background: rgba(255, 255, 255, 0.1);

  .el-input__inner {
    // background: rgba(255, 255, 255, 0.1) ;
    border: none;
    border-radius: 5px;
    color: #fff;
  }

  :deep(input) {
    &:-webkit-autofill,
    &:-webkit-autofill:hover, 
    &:-webkit-autofill:focus,
    &:-internal-autofill-selected {
      -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
      background-color: transparent !important;
      transition: background-color 9999s ease-in-out 0s; // 兼容性处理
    }
  }
}


.login-main .login-captcha img {
  width: 100%;
  height: 34px;
}

.login-main .el-icon-circle-close:before {
  content: '';
  background: url("../../assets/img/login_close.png");
  width: 16px;
  height: 16px;
  display: inline-block;
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translate(0, -50%);
}

.login-main .el-icon-circle-check:before {
  content: '';
  background: url("../../assets/img/login_suc.png");
  width: 16px;
  height: 16px;
  display: inline-block;
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translate(0, -50%);
}

.login-btn-submit {
  width: 100%;
  height: 50px;
  background-color: #1463a8;
  border-radius: 5px;
  font-size: 16px;
  font-weight: bold;
  margin-top: 5px;
}

.el-carousel {
  height: 100%;
}

.el-carousel__container {
  height: 100%;
}

.login-footer {
  height: 80px;
  background: #fff;
  text-align: center;
  line-height: 80px;
  color: #999999;
}
</style>